<!DOCTYPE html>
<html>
<!-- zhouzhihuan 20181112 -->

<head>
  <title>左右分栏</title>
  <style>
    html,
    body,
    #container {
      height: 100%;
      margin: 0;
    }

    #editer,
    #display {
      display: inline-block;
      width: 49%;
      height: 100%;
      vertical-align: top;
      box-sizing: border-box;
      padding: 0 20px;
    }

    #editer {
      border: none;
      border-right: 1px solid #ccc;
      resize: none;
      outline: none;
      background-color: #f6f6f6;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div id="container">
    <textarea id="editer">这是编辑区</textarea>
    <div id="display">
      <h1>这是展示区</h1>
    </div>
  </div>
</body>

</html>